import Vue from "vue/dist/vue.runtime.min";
import app from "../vue/order3.vue";
window.LArea = (function() {
	var MobileArea = function() {
		this.gearArea;
		this.data;
		this.index = 0;
		this.value = [0, 0, 0];
	};
	MobileArea.prototype = {
		init: function(params) {
			this.params = params;
			this.trigger = document.querySelector(params.trigger);
			if (params.valueTo) {
				this.valueTo = document.querySelector(params.valueTo);
			}
			this.keys = params.keys;
			this.type = params.type || 1;
			switch (this.type) {
				case 1:
				case 2:
					break;
				default:
					throw new Error("错误提示: 没有这种数据源类型");
					break;
			}
			this.bindEvent();
		},
		getData: function(callback) {
			var _self = this;
			if (typeof _self.params.data == "object") {
				_self.data = _self.params.data;
				callback();
			} else {
				var xhr = new XMLHttpRequest();
				xhr.open("get", _self.params.data);
				xhr.onload = function(e) {
					if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 0) {
						var responseData = JSON.parse(xhr.responseText);
						_self.data = responseData.data;
						if (callback) {
							callback();
						}
					}
				};
				xhr.send();
			}
		},
		bindEvent: function() {
			var _self = this;
			//呼出插件
			function popupArea(e) {
				_self.gearArea = document.createElement("div");
				_self.gearArea.className = "gearArea";
				_self.gearArea.innerHTML =
					'<div class="area_ctrl slideInUp">' +
					'<div class="area_btn_box">' +
					'<div class="area_btn larea_cancel">取消</div>' +
					'<div class="area_btn larea_finish">确定</div>' +
					"</div>" +
					'<div class="area_roll_mask">' +
					'<div class="area_roll">' +
					"<div>" +
					'<div class="gear area_province" data-areatype="area_province"></div>' +
					'<div class="area_grid">' +
					"</div>" +
					"</div>" +
					"<div>" +
					'<div class="gear area_city" data-areatype="area_city"></div>' +
					'<div class="area_grid">' +
					"</div>" +
					"</div>" +
					"<div>" +
					'<div class="gear area_county" data-areatype="area_county"></div>' +
					'<div class="area_grid">' +
					"</div>" +
					"</div>" +
					"</div>" +
					"</div>" +
					"</div>";
				document.body.appendChild(_self.gearArea);
				areaCtrlInit();
				var larea_cancel = _self.gearArea.querySelector(".larea_cancel");
				larea_cancel.addEventListener("touchstart", function(e) {
					_self.close(e);
				});
				var larea_finish = _self.gearArea.querySelector(".larea_finish");
				larea_finish.addEventListener("touchstart", function(e) {
					_self.finish(e);
				});
				var area_province = _self.gearArea.querySelector(".area_province");
				var area_city = _self.gearArea.querySelector(".area_city");
				var area_county = _self.gearArea.querySelector(".area_county");
				area_province.addEventListener("touchstart", gearTouchStart);
				area_city.addEventListener("touchstart", gearTouchStart);
				area_county.addEventListener("touchstart", gearTouchStart);
				area_province.addEventListener("touchmove", gearTouchMove);
				area_city.addEventListener("touchmove", gearTouchMove);
				area_county.addEventListener("touchmove", gearTouchMove);
				area_province.addEventListener("touchend", gearTouchEnd);
				area_city.addEventListener("touchend", gearTouchEnd);
				area_county.addEventListener("touchend", gearTouchEnd);
			}
			//初始化插件默认值
			function areaCtrlInit() {
				_self.gearArea
					.querySelector(".area_province")
					.setAttribute("val", _self.value[0]);
				_self.gearArea
					.querySelector(".area_city")
					.setAttribute("val", _self.value[1]);
				_self.gearArea
					.querySelector(".area_county")
					.setAttribute("val", _self.value[2]);

				switch (_self.type) {
					case 1:
						_self.setGearTooth(_self.data);
						break;
					case 2:
						_self.setGearTooth(_self.data[0]);
						break;
				}
			}
			//触摸开始
			function gearTouchStart(e) {
				e.preventDefault();
				var target = e.target;
				while (true) {
					if (!target.classList.contains("gear")) {
						target = target.parentElement;
					} else {
						break;
					}
				}
				clearInterval(target["int_" + target.id]);
				target["old_" + target.id] = e.targetTouches[0].screenY;
				target["o_t_" + target.id] = new Date().getTime();
				var top = target.getAttribute("top");
				if (top) {
					target["o_d_" + target.id] = parseFloat(top.replace(/em/g, ""));
				} else {
					target["o_d_" + target.id] = 0;
				}
				target.style.webkitTransitionDuration = target.style.transitionDuration =
					"0ms";
			}
			//手指移动
			function gearTouchMove(e) {
				e.preventDefault();
				var target = e.target;
				while (true) {
					if (!target.classList.contains("gear")) {
						target = target.parentElement;
					} else {
						break;
					}
				}
				target["new_" + target.id] = e.targetTouches[0].screenY;
				target["n_t_" + target.id] = new Date().getTime();
				var f =
					((target["new_" + target.id] - target["old_" + target.id]) * 30) /
					window.innerHeight;
				target["pos_" + target.id] = target["o_d_" + target.id] + f;
				target.style["-webkit-transform"] =
					"translate3d(0," + target["pos_" + target.id] + "em,0)";
				target.setAttribute("top", target["pos_" + target.id] + "em");
				if (e.targetTouches[0].screenY < 1) {
					gearTouchEnd(e);
				}
			}
			//离开屏幕
			function gearTouchEnd(e) {
				e.preventDefault();
				var target = e.target;
				while (true) {
					if (!target.classList.contains("gear")) {
						target = target.parentElement;
					} else {
						break;
					}
				}
				var flag =
					(target["new_" + target.id] - target["old_" + target.id]) /
					(target["n_t_" + target.id] - target["o_t_" + target.id]);
				if (Math.abs(flag) <= 0.2) {
					target["spd_" + target.id] = flag < 0 ? -0.08 : 0.08;
				} else {
					if (Math.abs(flag) <= 0.5) {
						target["spd_" + target.id] = flag < 0 ? -0.16 : 0.16;
					} else {
						target["spd_" + target.id] = flag / 2;
					}
				}
				if (!target["pos_" + target.id]) {
					target["pos_" + target.id] = 0;
				}
				rollGear(target);
			}
			//缓动效果
			function rollGear(target) {
				var d = 0;
				var stopGear = false;
				function setDuration() {
					target.style.webkitTransitionDuration = target.style.transitionDuration =
						"200ms";
					stopGear = true;
				}
				clearInterval(target["int_" + target.id]);
				target["int_" + target.id] = setInterval(function() {
					var pos = target["pos_" + target.id];
					var speed = target["spd_" + target.id] * Math.exp(-0.03 * d);
					pos += speed;
					if (Math.abs(speed) > 0.1) {
					} else {
						var b = Math.round(pos / 2) * 2;
						pos = b;
						setDuration();
					}
					if (pos > 0) {
						pos = 0;
						setDuration();
					}
					var minTop = -(target.dataset.len - 1) * 2;
					if (pos < minTop) {
						pos = minTop;
						setDuration();
					}
					if (stopGear) {
						var gearVal = Math.abs(pos) / 2;
						setGear(target, gearVal);
						clearInterval(target["int_" + target.id]);
					}
					target["pos_" + target.id] = pos;
					target.style["-webkit-transform"] = "translate3d(0," + pos + "em,0)";
					target.setAttribute("top", pos + "em");
					d++;
				}, 30);
			}
			//控制插件滚动后停留的值
			function setGear(target, val) {
				val = Math.round(val);
				target.setAttribute("val", val);
				switch (_self.type) {
					case 1:
						_self.setGearTooth(_self.data);
						break;
					case 2:
						switch (target.dataset["areatype"]) {
							case "area_province":
								_self.setGearTooth(_self.data[0]);
								break;
							case "area_city":
								var ref = target.childNodes[val].getAttribute("ref");
								var childData = [];
								var nextData = _self.data[2];
								for (var i in nextData) {
									if (i == ref) {
										childData = nextData[i];
										break;
									}
								}
								_self.index = 2;
								_self.setGearTooth(childData);
								break;
						}
				}
			}
			_self.getData(function() {
				_self.trigger.addEventListener("click", popupArea);
			});
		},
		//重置节点个数
		setGearTooth: function(data) {
			var _self = this;
			var item = data || [];
			var l = item.length;
			var gearChild = _self.gearArea.querySelectorAll(".gear");
			var gearVal = gearChild[_self.index].getAttribute("val");
			var maxVal = l - 1;
			if (gearVal > maxVal) {
				gearVal = maxVal;
			}
			gearChild[_self.index].setAttribute("data-len", l);
			if (l > 0) {
				var id = item[gearVal][this.keys["id"]];
				var childData;
				switch (_self.type) {
					case 1:
						childData = item[gearVal].child;
						break;
					case 2:
						var nextData = _self.data[_self.index + 1];
						for (var i in nextData) {
							if (i == id) {
								childData = nextData[i];
								break;
							}
						}
						break;
				}
				var itemStr = "";
				for (var i = 0; i < l; i++) {
					itemStr +=
						"<div class='tooth'  ref='" +
						item[i][this.keys["id"]] +
						"'>" +
						item[i][this.keys["name"]] +
						"</div>";
				}
				gearChild[_self.index].innerHTML = itemStr;
				gearChild[_self.index].style["-webkit-transform"] =
					"translate3d(0," + -gearVal * 2 + "em,0)";
				gearChild[_self.index].setAttribute("top", -gearVal * 2 + "em");
				gearChild[_self.index].setAttribute("val", gearVal);
				_self.index++;
				if (_self.index > 2) {
					_self.index = 0;
					return;
				}
				_self.setGearTooth(childData);
			} else {
				gearChild[_self.index].innerHTML = "<div class='tooth'></div>";
				gearChild[_self.index].setAttribute("val", 0);
				if (_self.index == 1) {
					gearChild[2].innerHTML = "<div class='tooth'></div>";
					gearChild[2].setAttribute("val", 0);
				}
				_self.index = 0;
			}
		},
		finish: function(e) {
			var _self = this;
			var area_province = _self.gearArea.querySelector(".area_province");
			var area_city = _self.gearArea.querySelector(".area_city");
			var area_county = _self.gearArea.querySelector(".area_county");
			var provinceVal = parseInt(area_province.getAttribute("val"));
			var provinceText = area_province.childNodes[provinceVal].textContent;
			var provinceCode = area_province.childNodes[provinceVal].getAttribute(
				"ref"
			);
			var cityVal = parseInt(area_city.getAttribute("val"));
			var cityText = area_city.childNodes[cityVal].textContent;
			var cityCode = area_city.childNodes[cityVal].getAttribute("ref");
			var countyVal = parseInt(area_county.getAttribute("val"));
			var countyText = area_county.childNodes[countyVal].textContent;
			var countyCode = area_county.childNodes[countyVal].getAttribute("ref");
			_self.trigger.value =
				provinceText +
				(cityText ? "," + cityText : "") +
				(countyText ? "," + countyText : "");
			_self.value = [provinceVal, cityVal, countyVal];
			if (this.valueTo) {
				this.valueTo.value =
					provinceCode +
					(cityCode ? "," + cityCode : "") +
					(countyCode ? "," + countyCode : "");
			}
			_self.close(e);
		},
		close: function(e) {
			e.preventDefault();
			var _self = this;
			var evt = new CustomEvent("input");
			_self.trigger.dispatchEvent(evt);
			document.body.removeChild(_self.gearArea);
			_self.gearArea = null;
		}
	};
	return MobileArea;
})();
Vue.prototype.global = window;
Vue.prototype.CDN_RESOURCE = window.CDN_RESOURCE;
Vue.prototype.RESOURCE = window.RESOURCE;
Vue.prototype.VERSION = window.VERSION;
Vue.prototype.IS_DEVELOPMENT = window.IS_DEVELOPMENT;
new Vue(app).$mount("#app");
